<template>
    <div>

        <crumbs></crumbs>
        <div class="name"> 办理流程订制</div>
        <!-- aSearch -->
        <div class="top">
            <div class="right">
                <el-input v-model="input" class="w" size="large" placeholder="请输入流程名称关键字" />
                <div class="button">
                    <el-button type="primary" class="btn" @click="search">搜索</el-button>
                </div>
            </div>
            <div class="button1">
                <el-button type="primary" class="btn1" @click="addProced">新建流程</el-button>
            </div>

            <!-- 弹窗 -->
            <el-dialog v-model="dialogFormVisible" title="新建流程">
                <el-from v-model="formData">
                    <div class="input">
                        <p>流程id：</p>
                        <el-input v-model="id" placeholder="请输入流程id" class="elinput" />
                    </div>
                    <div class="input">
                        <p>流程类型：</p>
                        <el-input v-model="h_name" placeholder="请输入流程类型" class="elinput" />
                    </div>

                </el-from>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="addproce">保存</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
                    </span>
                </template>
            </el-dialog>

        </div>


        <!-- ProceduresList -->
        <div>
            <el-table :data="tableData" border style="width: 100%" #default="scope">
                <el-table-column prop="id" label="序号" align="center" />
                <el-table-column prop="h_name" label="流程名程" align="center" />
                <el-table-column label="操作" align="center">

                    <template #default="scope">
                        <el-button type="danger" @click="del(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <page></page>
        </div>

        <div style="margin-left: 20px;" id="pageall">
            <el-pagination :current-page="page.pageNum" :page-size="page.pageSize" :page-sizes="[2, 5, 10, 20]"
                layout="total, sizes, prev, pager, next, jumper" :total="totallenght" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>


    </div>
</template>

<script>

import crumbs from "../../components/ServiceManagement/crumbs/crumbs.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineComponent } from 'vue'
import { ref, toRefs, reactive, onMounted } from "vue"
import axios from 'axios'
import page from '@/components/ServiceManagement/list/page.vue'
export default {
    name: "handlingProcedures",
    props: ['msg'],
    setup(props) {

        //asearch
        const quxiao = ref('取消')
        const baocun = ref('保存')
        const input = ref("")
        const id = ref("")
        const h_name = ref("")
        const formData = ref("")
        const value = ref("")
        const options = [
            {
                value: "OPtion1",
                label: "option1"
            }
        ]

        const addproce = () => {
            console.log("保存成功");
            data.dialogFormVisible = false;
            axios({
                url: "http://172.16.123.99:8080/process/addprocessmsg",
                method: "post",
                params: {
                    id: id.value,
                    h_name: h_name.value
                }
            }).then(
                resp => {
                    console.log(resp.data);
                    tableData.value.push({
                        id: id.value,
                        h_name: h_name.value
                    })

                }
            )
        }

        const data = reactive({
            dialogFormVisible: false
        })
        //list
        let tableData = ref([])
        axios({
            url: "http://172.16.123.99:8080/process/findprocessList",
            method: "get",
            params: {
                limit: 1,
                currentPage: 1,
                pageSize: 10
            }
        }).then(
            resp => {
                console.log(resp.data);
                tableData.value = JSON.parse(resp.data.data)
            }
        )

        const addProced = () => {
            console.log("新建添加");
            data.dialogFormVisible = true
        }

        const del = (index, row) => {
            ElMessageBox.confirm('确定删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: 'http://172.16.123.99:8080/process/delprocessmsg',
                    method: 'post',
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        tableData.value.splice(index, 1)

                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                }).catch((err) => {
                    console.log('错误了', err);
                })
            }).catch(() => {
                //点击了取消按钮
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
        const search = () => {
            console.log("111111", input.value);
            axios({
                url: "http://172.16.123.99:8080/process/searchprocessmsg",
                method: "post",
                params: {
                    currentPage: 1,
                    pageSize: 10,
                    h_name: input.value,
                    id: input.value
                }
            }).then(
                resp => {
                    tableData.value = []
                    tableData.value = JSON.parse(resp.data.data)
                    console.log(tableData.value);
                    console.log(resp.data);
                }
            )
        }
        //分页
        let totallenght = ref()
        const page = reactive({//配置对应的查询参数
            pageNum: 1,
            pageSize: 5,
        });
        function GetUserData() {
            axios({
                url: 'http://172.16.123.99:8080/process/findprocessList',
                method: 'post',
                params: {
                    currentPage: page.pageNum,
                    pageSize: page.pageSize,
                }
            }).then(resp => {
                tableData.value = JSON.parse(resp.data.data)
                console.log('00000000', resp.data)
                totallenght.value = resp.data.conut
                console.log(66666666666, totallenght.value)
            })
        }
        onMounted(() => {
            GetUserData()
        })
        const handleSizeChange = (val) => {
            page.pageSize = val
            console.log(val)
            GetUserData();
        }
        const handleCurrentChange = (val) => {
            page.pageNum = val
            console.log(val)
            GetUserData();
        }
        //3.导出   如果想要数据在外部渲染 必须得导出
        return {
            input,
            h_name,
            id,
            search,
            formData,
            value,
            options,
            addProced,
            addproce,
            ref,
            del,
            tableData,
            ElMessage,
            ElMessageBox,
            ...toRefs(data),
            totallenght,
            handleSizeChange,
            handleCurrentChange,
            page
        };
    },
    components: {
        crumbs,
    }
}
</script>
<style scoped>
.name {
    text-align: left;
    margin: 20px;
    font-weight: bold;
}

.aSearch {
    margin-bottom: 20px;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
}

.input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.elinput {
    width: 90%;
}

.select {
    width: 134px;
}

.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
}
#pageall {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}
</style>